import React, { useState, useEffect } from 'react'
import { Modal, Button, Input, Table, Space, Row, Col, Popconfirm, message } from 'antd'
import {
    getBannerList,
    addBannerList,
    getBannerDetail,
    putBannerDetail,
    delBannerItem
} from '@/api/banner'
import { connect } from 'umi'
import Card from '@/components/Card'

type Props = {
    banner: Array<any>,
    dispatch: any
}


function List({ banner, dispatch }: Props) {
    const columns = [
        {
            title: '广告位名称',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (
                <Space size="middle">
                    <Button onClick={() => {
                        edit(text._id)
                    }} type="primary">编辑</Button>

                    <Popconfirm
                        title="确定要删除嘛？"
                        onConfirm={() => {
                            confirm(text._id)
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button type="primary" danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    const [visible, setVisible] = useState(false)
    const [data, setData] = useState([])
    const [name, setName] = useState('')
    const [isEdit, setEdit] = useState(false)
    const [editId, setEditId] = useState('')
    useEffect(() => {
        init()
    }, [])

    function confirm(id: any) {
        delBannerItem(id).then(res => {
            init()
        })
    }

    function cancel() {
        message.error('取消删除');
    }

    // 点击编辑按钮
    function edit(id: string) {
        setEdit(true)
        setEditId(id)
        getBannerDetail(id).then((res: any) => {
            console.log(res)
            setName(res.name)
            // 对卡片数据进行赋值
            dispatch({ type: "banner/getDetail", res: res.items })
            setVisible(true)
            console.log(isEdit, visible)
        })
    }

    function init() {
        getBannerList().then((res: any) => {
            if (res) {
                res.forEach((item: any, index: any) => {
                    item.key = (index + 1) + ''
                })
                setData(res)
            }
        })
    }

    function onOk() {
        // 编辑状态
        if (isEdit) {
            console.log(123)
            putBannerDetail(editId, {
                items: banner,
                name,
                _id: editId
            }).then(res => {
                console.log(res)
            })
        } else {
            // 新增
            addBannerList({
                name,
                items: banner
            }).then(res => {
            })
        }
        setName('')
        setVisible(false)
        init()
    }


    function onCancel() {
        setEdit(false)
        setVisible(false)
    }

    // 点击添加弹框
    function showVisible() {
        setName('')
        dispatch({ type: 'banner/getDetail', res: [] })
        setVisible(true)
    }

    // 添加卡片
    function addItem() {
        dispatch({ type: "banner/save" })
    }
    return (
        <div className='p20'>
            <div className='context_card'>
                {/* 弹出框 */}
                <Button type="primary" onClick={showVisible}>
                    + 添加广告位
                </Button>
                <Modal
                    title="添加广告位"
                    visible={visible}
                    onOk={onOk}
                    onCancel={onCancel}
                    width={1000}
                >
                    <div className='banner_flex'>
                        <span>
                            广告位名称
                        </span>
                        <Input value={name} onChange={(ev) => {
                            setName(ev.target.value)
                        }} placeholder="Basic usage" />
                    </div>

                    <Button className='mt15'
                        onClick={addItem}
                        type="primary">+ 添加广告位信息</Button>
                    {/* 卡片 */}
                    <Row>
                        {
                            banner.map((item, index) => {
                                return <Col span={12} key={index}>
                                    {/* 区分是编辑还是新增  */}
                                    <Card url={isEdit ? item.img : false} index={index} />
                                </Col>
                            })
                        }
                    </Row>
                </Modal>
                {/* 表格 */}
                <div className='mt15'>
                    <Table columns={columns} dataSource={data} />
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { banner } = state
    return {
        banner
    }
}

export default connect(mapStateToProps)(List)